import React, { useState, useEffect } from 'react';
import { Form, Button, Space } from 'antd';
import { componentsMap, goBack, checkStatusMap } from '@/utils/util';
import API from '@/api/xjindex.js';
import FileList from '@/components/FileLists';

function Detail({ history }) {
  const [fileList, setfileList] = useState([]);
  const [fileList1, setfileList1] = useState([]);
  const [form] = Form.useForm();
  const TableList = [
    {
      name: 'orgName',
      label: '所属单位',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      name: 'status',
      label: '报告状态',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      name: 'createName',
      type: 'input',
      label: '创建人',
      otherProps: {
        disabled: true,
      },
    },
    {
      name: 'createTime',
      type: 'input',
      label: '创建时间',
      otherProps: {
        disabled: true,
      },
    },
    {
      name: 'remarks',
      type: 'textarea',
      label: '报告说明',
      otherProps: {
        disabled: true,
      },
      isremark: true,
    },
  ];
  const TableList1 = [
    {
      name: 'orgName',
      label: '处置单位',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      name: 'disposalTime',
      label: '处置时间',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      name: 'disposalName',
      type: 'input',
      label: '处置人',
      otherProps: {
        disabled: true,
      },
    },
    {
      name: 'dremarks',
      type: 'textarea',
      label: '处置说明',
      isremark: true,
      otherProps: {
        disabled: true,
      },
    },
  ];
  function initList() {
    API.findSecurityCheck({ id: history.location.query.id }).then((res) => {
      if (res) {
        setfileList(res.t.securityCheckFileList);
        form.setFieldsValue({
          ...res.t,
          status: checkStatusMap(res.t.status),
        });
        if (res.t.status == '3') {
          API.findDisposalResult({ id: history.location.query.id }).then(
            (res) => {
              if (res) {
                form.setFieldsValue({
                  ...res.t,
                  status: checkStatusMap(res.t.status),
                });
                setfileList1(res.t.disposalResultFileList);
              }
            },
          );
        }
      }
    });
  }
  useEffect(() => {
    initList();
  }, []);
  return (
    <div className="main-x">
      <Form form={form}>
        <div className="base-title">安全事件信息</div>
        <div className="ant-form-inline form-x bgf">
          {TableList.map((item) => {
            return (
              <Form.Item
                key={item.name}
                label={item.label}
                name={item.name}
                disabled={item.disabled}
                className={item.isremark ? 'block' : ''}
              >
                {componentsMap(item.type, item.otherProps, true)}
              </Form.Item>
            );
          })}
          <Form.Item label="附件信息" className="block">
            {
              <FileList
                fileList={fileList}
                downloadUrl="/securityCheck/downloadSc"
              />
            }
          </Form.Item>
        </div>
        <div className="base-title mt20">处置结果</div>
        <div className="ant-form-inline form-x bgf">
          {TableList1.map((item) => {
            return (
              <Form.Item
                key={item.name}
                label={item.label}
                name={item.name}
                disabled={item.disabled}
                className={item.isremark ? 'block' : ''}
              >
                {componentsMap(item.type, item.otherProps, true)}
              </Form.Item>
            );
          })}
          <Form.Item label="附件信息" className="block">
            {
              <FileList
                fileList={fileList1}
                downloadUrl="/securityCheck/downloadDr"
              />
            }
          </Form.Item>
        </div>
        <div className="footer-x">
          <Space className="btns" size={18}>
            <Button type="primary" className="cancel-btn" onClick={goBack}>
              返回
            </Button>
          </Space>
        </div>
      </Form>
    </div>
  );
}

export default Detail;
